/* 混合课表视图样式 */
.mixedScheduleView {
  @apply w-full space-y-4;
}

.controlPanel {
  @apply shadow-sm;
}

.controlContent {
  @apply flex flex-wrap items-center gap-4;
}

.controlLabel {
  @apply text-sm font-medium text-gray-700 flex-shrink-0;
}

.studentSelector {
  @apply flex items-center gap-2 flex-1 min-w-64;
}

.studentSelect {
  @apply flex-1;
}

.limitHint {
  @apply text-xs text-orange-500;
}

.dateRangeSelector {
  @apply flex items-center gap-2;
}

.dateRangePicker {
  @apply min-w-64;
}

.viewModeSelector {
  @apply flex items-center gap-2;
}

.viewModeRadio :global(.ant-radio-button-wrapper) {
  @apply flex items-center gap-1;
}

.statsCard {
  @apply shadow-sm;
}

.statsContent {
  @apply flex items-center gap-6;
}

.statItem {
  @apply flex items-center gap-1;
}

.statLabel {
  @apply text-sm text-gray-600;
}

.statValue {
  @apply text-sm font-medium text-blue-600;
}

.contentCard {
  @apply min-h-96;
}

.emptyState {
  @apply flex items-center justify-center py-16;
}

.emptyMessage {
  @apply text-gray-500 text-center;
}

/* 时间轴视图样式 */
.timelineContainer {
  @apply space-y-4;
}

.studentCard {
  @apply shadow-sm;
}

.studentHeader {
  @apply flex items-center gap-2;
}

.studentIcon {
  @apply text-blue-500;
}

.studentName {
  @apply font-medium;
}

.instanceCount :global(.ant-badge-count) {
  @apply bg-blue-500;
}

.instanceTimeline {
  @apply min-h-20;
}

.noInstances {
  @apply text-gray-500 text-center py-4;
}

.instanceGrid {
  @apply grid gap-3;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.timelineInstanceCard {
  @apply w-full;
}

/* 网格视图样式 */
.gridContainer {
  @apply w-full overflow-x-auto;
}

.gridHeader {
  @apply flex border-b border-gray-200 bg-gray-50;
}

.studentColumn {
  @apply w-32 p-3 font-medium text-gray-700 border-r border-gray-200 flex-shrink-0;
}

.dateColumn {
  @apply w-24 p-2 text-center border-r border-gray-200 flex-shrink-0;
}

.dateLabel {
  @apply text-sm font-medium text-gray-900;
}

.weekdayLabel {
  @apply text-xs text-gray-600;
}

.gridBody {
  @apply space-y-0;
}

.gridRow {
  @apply flex border-b border-gray-100 hover:bg-gray-50;
}

.studentCell {
  @apply w-32 p-3 border-r border-gray-200 flex-shrink-0;
}

.studentInfo {
  @apply flex items-center justify-between;
}

.dateCell {
  @apply w-24 p-1 border-r border-gray-200 space-y-1 flex-shrink-0;
}

.gridInstance {
  @apply p-1 rounded text-xs cursor-pointer hover:shadow-sm transition-all duration-200;
  border: 1px solid;
}

.instanceTime {
  @apply font-medium text-gray-700;
}

.instanceCourse {
  @apply text-gray-600 truncate;
}

/* 紧凑视图样式 */
.compactContainer {
  @apply space-y-4;
}

.dateCard {
  @apply shadow-sm;
}

.dateHeader {
  @apply flex items-center gap-2;
}

.dateIcon {
  @apply text-green-500;
}

.dateTitle {
  @apply font-medium;
}

.compactInstances {
  @apply space-y-2;
}

.compactInstance {
  @apply flex items-center gap-3 p-2 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer transition-colors duration-200;
}

.compactIndicator {
  @apply w-1 h-8 rounded flex-shrink-0;
}

.compactContent {
  @apply flex-1 min-w-0;
}

.compactTime {
  @apply text-sm font-medium text-gray-900;
}

.compactInfo {
  @apply flex items-center gap-2 text-sm text-gray-600;
}

.compactCourse {
  @apply font-medium;
}

.compactStudent {
  @apply text-gray-500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .controlContent {
    @apply flex-col items-start gap-3;
  }
  
  .studentSelector {
    @apply w-full min-w-0;
  }
  
  .instanceGrid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .controlContent {
    @apply space-y-3;
  }
  
  .dateRangeSelector,
  .viewModeSelector {
    @apply w-full;
  }
  
  .dateRangePicker {
    @apply w-full min-w-0;
  }
  
  .statsContent {
    @apply flex-wrap gap-3;
  }
  
  .instanceGrid {
    grid-template-columns: 1fr;
  }
  
  .studentColumn {
    @apply w-24;
  }
  
  .dateColumn {
    @apply w-20;
  }
  
  .studentCell {
    @apply w-24;
  }
  
  .dateCell {
    @apply w-20;
  }
  
  .compactInfo {
    @apply flex-col items-start gap-0;
  }
}

@media (max-width: 480px) {
  .viewModeRadio :global(.ant-radio-button-wrapper) {
    @apply px-2;
  }
  
  .viewModeRadio :global(.ant-radio-button-wrapper span:not(.anticon)) {
    @apply hidden;
  }
  
  .gridContainer {
    @apply text-xs;
  }
  
  .compactInstance {
    @apply p-1.5;
  }
  
  .compactTime {
    @apply text-xs;
  }
  
  .compactInfo {
    @apply text-xs;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .controlPanel,
  .statsCard,
  .contentCard,
  .studentCard,
  .dateCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .controlLabel {
    @apply text-gray-300;
  }
  
  .limitHint {
    @apply text-orange-400;
  }
  
  .statLabel {
    @apply text-gray-400;
  }
  
  .statValue {
    @apply text-blue-400;
  }
  
  .emptyMessage {
    @apply text-gray-400;
  }
  
  .studentName {
    @apply text-gray-100;
  }
  
  .noInstances {
    @apply text-gray-400;
  }
  
  .gridHeader {
    @apply bg-gray-700 border-gray-600;
  }
  
  .studentColumn {
    @apply text-gray-200 border-gray-600;
  }
  
  .dateColumn {
    @apply border-gray-600;
  }
  
  .dateLabel {
    @apply text-gray-100;
  }
  
  .weekdayLabel {
    @apply text-gray-400;
  }
  
  .gridRow {
    @apply border-gray-700 hover:bg-gray-700;
  }
  
  .studentCell,
  .dateCell {
    @apply border-gray-600;
  }
  
  .instanceTime {
    @apply text-gray-200;
  }
  
  .instanceCourse {
    @apply text-gray-300;
  }
  
  .dateTitle {
    @apply text-gray-100;
  }
  
  .compactInstance {
    @apply bg-gray-700 hover:bg-gray-600;
  }
  
  .compactTime {
    @apply text-gray-100;
  }
  
  .compactCourse {
    @apply text-gray-200;
  }
  
  .compactStudent {
    @apply text-gray-400;
  }
}